<template>
  <div class="main">
    <el-container>
      <el-header>
        <el-button id="lable" icon="el-icon-s-unfold" @click="showlabel()"></el-button>
        <span style="font-size: 20px;">膳食服务后台管理系统</span>
        <div class="user-info">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              欢迎您，{{username}}
              <i class="el-icon-s-custom" style="font-size: 30px;"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="loginout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container style="display: flex; ">
        <el-aside id="aside" :width="width" >
          <el-menu
             class="el-menu-vertical-demo"
             @open="handleOpen"
             @close="handleClose"
             :unique-opened="true"
             router
            :collapse="isCollapse" text-color="#393B3D" active-text-color="#409EFF"

            style="height: 100%;">

<!--           <template>
              <el-menu-item  index="/order">
                 <i class="iconfont icon-dingdan" style=" font-size: 23px;"></i>
                 <span slot="title" style="font-size: 17px; margin-left: 14px;">订单</span>
               </el-menu-item>
            </template>


            <template>
              <el-menu-item  index="/data">
                 <i class="iconfont icon-shujukanban" style=" font-size: 23px;"></i>
                 <span slot="title" style="font-size: 17px; margin-left: 14px;">数据</span>
               </el-menu-item>
            </template>


            <template>
              <el-menu-item  index="/store">
                 <i class="iconfont icon-mendian" style=" font-size: 23px;"></i>
                 <span slot="title" style="font-size: 17px; margin-left: 14px;">商铺</span>
               </el-menu-item>
            </template>

            <template>
              <el-menu-item  index="/food">
                 <i class="iconfont icon-shipin" style=" font-size: 23px;"></i>
                 <span slot="title" style="font-size: 17px; margin-left: 14px;">菜品</span>
               </el-menu-item>
            </template>

            <template>
              <el-menu-item  index="/comment">
                 <i class="iconfont icon-pinglunxiao" style=" font-size: 23px;"></i>
                 <span slot="title" style="font-size: 17px; margin-left: 14px;">评论</span>
               </el-menu-item>
            </template>


            <template>
              <el-menu-item  index="/application">
                 <i class="iconfont icon-shouye1" style=" font-size: 23px;"></i>
                 <span slot="title" style="font-size: 17px; margin-left: 14px;">开店申请</span>
               </el-menu-item>
            </template>


            <template>
              <el-menu-item  index="/audit">
                 <i class="iconfont icon-shenhe" style=" font-size: 23px;"></i>
                 <span slot="title" style="font-size: 17px; margin-left: 14px;">商家审核</span>
               </el-menu-item>
            </template>

            <template>
              <el-menu-item  index="/type">
                 <i class="iconfont icon-type" style=" font-size: 23px;"></i>
                 <span slot="title" style="font-size: 17px; margin-left: 14px;">类型管理</span>
               </el-menu-item>
            </template> -->

            <template v-for="m in menuArr">
              <el-menu-item  :index="m.path">
                 <i :class="m.icon" style=" font-size: 23px; "></i>
                 <span slot="title" style="font-size: 17px; margin-left: 14px;">{{m.resourceName}}</span>
               </el-menu-item>
            </template>

          </el-menu>
        </el-aside>
        <el-main style="width: 100%; padding: 15px;">
             <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>


<script>
  export default {
    name: 'Main',
    data() {
      return {
        width:"55px",
        loginUser: {},
        menuArr:[],
        name: '管理员',
        isCollapse: true,
        activeIndex:"",
      }
    },
    computed: {
      username() {
        let username = this.loginUser.nickName;
        return username ? username : this.name;
      }
    },
    methods:{
      handleCommand(command) {
        if (command == 'loginout') {
          localStorage.removeItem('loginUser')
          this.$router.push('/login');
        }
      },

      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },

      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

      showlabel() {
        let obj = this.$("#lable").children().prop("class")
        if (obj == "el-icon-s-unfold") {
          this.$("#lable").children().prop("class", "el-icon-s-fold")

          this.isCollapse = false
          this.width="150px"



        } else {
          this.$("#lable").children().prop("class", "el-icon-s-unfold")
          this.isCollapse = true
          this.width="55px"



        }
      },
      getMenus(){
        this.$http.get("/resource/getMenus").then(resp=>{
          console.log(resp)
          let defultpath=resp.data.data[0].path
          this.$router.push(defultpath)
          this.menuArr=resp.data.data

        })
      },
    },
    created() {
      this.loginUser = JSON.parse(localStorage.getItem("loginUser"));
  
      this.getMenus();

      // this.getMenus()


    }
  }

  //导入icon资源
import '../assets/icon/iconfont.css';
</script>



<style scoped>
  .el-menu-item:hover {
    background: #B3D8FF !important;
  }

  .user-info {
    float: right;
    padding-right: 30px;
    font-size: 16px;
    color: #fff;
  }

  .user-info .el-dropdown-link {
    position: relative;
    display: inline-block;
    padding-left: 50px;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
  }

  .user-info .user-logo {
    position: absolute;
    left: 0;
    top: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .el-dropdown-menu__item {
    text-align: center;

  }

  #lable {
    background-color: transparent;
    font-size: 25px;
    border: 0;
    color: white;
    margin-right: 10px;
    height: 55px;
    width: 50px;

  }

  .el-aside>.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 100%;
    height: 100%;
  }

  .el-header {
    background-color: rgb(48, 148, 250);
    color: white;
    padding: 0px;
    line-height: 70px;

  }

  .el-aside {
    color: #B3D8FF;
    height:565px;
  }

  .el-main {
    background-color:#E8EBEA;
    color: #333;
    bottom: 0;
  }
  .main{
    bottom: 0;
  }
</style>
